<template>
  <div class="app-container">
    <div class="header">
      <span class="round-text">理论知识必答题</span>
    </div>

    <el-divider />

    <el-row :gutter="24">
      <el-col :span="24">
        <el-card>
          <div class="question-grid">
            <el-button
              v-for="(item, index) in quList"
              :key="index"
              :disabled="answeredQuestions.includes(index)"
              :style="
                answeredQuestions.includes(index)
                  ? 'background: gray;'
                  : 'background: red;'
              "
              :type="answeredQuestions.includes(index) ? 'info' : 'primary'"
              @click="selectQuestion(item, index)"
            >
              <span class="question-number">{{ index + 1 }}</span>
              <span class="question-text">必答题</span>
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="btn">
      <el-button @click="() => this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button
        @click="() => this.$router.push({ name: 'QuickResponder' })"
        icon="el-icon-arrow-right"
        style="float: right"
      >
      </el-button>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="cousmt-dialog"
    >
      <!-- <div class="dialog-title">
        <span class="question-type">必答题</span>
        <span class="question-number">{{ currentQuestionIndex + 1 }}</span>
      </div> -->
      <div class="timer">
        <i class="el-icon-time" @click="startTimer"></i>剩余时间:
        {{ minutes }}:{{ seconds }}
      </div>
      <div class="question-content">
        <h3>{{ currentQuestion.content }}</h3>
      </div>
      <div v-if="answerRidao" class="answer">
        <div class="answer-label">正确答案：</div>
        <div class="answer-content">
          {{ currentQuestion.answer }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!answerRidao" type="primary" @click="showAanswer"
          >显示答案</el-button
        >
        <el-button v-if="answerRidao" type="primary" @click="submitAnswer"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "IndexState",

  data() {
    return {
      quList: [
        {
          id: 1,
          content: "1、社区警务工作三大任务是什么？",
          answer: "规定任务、指令任务、推送任务",
        },
        {
          id: 2,
          content: "2、社区民警的主要职责是什么？",
          answer:
            "管理实有人口、掌握社情民意、组织安全防范、维护社区秩序、服务辖区群众。",
        },
        {
          id: 3,
          content: '3、派出所"两队一室"分别指什么？',
          answer: "社区警务队、案件办理队和综合指挥室",
        },
        {
          id: 4,
          content: "4、社区警务工作的基本原则是什么？",
          answer: "预防为主、群防群治",
        },
        {
          id: 5,
          content: "5、社区民警的主要职责是什么？",
          answer:
            "管理实有人口、掌握社情民意、组织安全防范、维护社区秩序、服务辖区群众。",
        },
        {
          id: 6,
          content: '6、派出所"两队一室"分别指什么？',
          answer: "社区警务队、案件办理队和综合指挥室",
        },
        {
          id: 7,
          content: "7、社区警务工作的基本原则是什么？",
          answer: "预防为主、群防群治",
        },
        {
          id: 8,
          content: "8、社区民警的主要职责是什么？",
          answer:
            "管理实有人口、掌握社情民意、组织安全防范、维护社区秩序、服务辖区群众。",
        },
        {
          id: 9,
          content: '9、派出所"两队一室"分别指什么？',
          answer: "社区警务队、案件办理队和综合指挥室",
        },
        {
          id: 10,
          content: "10、社区警务工作的基本原则是什么？",
          answer: "预防为主、群防群治",
        },
        {
          id: 11,
          content: "11、社区民警的主要职责是什么？",
          answer:
            "管理实有人口、掌握社情民意、组织安全防范、维护社区秩序、服务辖区群众。asdasdasdasdasdasdasdasdas",
        },
        {
          id: 12,
          content: '12、派出所"两队一室"分别指什么？',
          answer: "社区警务队、案件办理队和绵绵指挥室",
        },
      ],
      answeredQuestions: [], // 已答题目索引
      currentQuestionIndex: null,
      currentQuestion: {},
      dialogVisible: false,
      checkList: [], // 多选答案
      radioAnswer: "", // 单选答案
      timer: null,
      timeLeft: 60, // 3分钟 = 180秒
      minutes: "00",
      seconds: "60",
      answerRidao: false,
    };
  },

  methods: {
    selectQuestion(question, index) {
      this.currentQuestion = question;
      this.currentQuestionIndex = index;
      this.answeredQuestions.push(this.currentQuestionIndex);
      this.dialogVisible = true;
      this.timeLeft = 60;
      this.checkList = [];
      this.radioAnswer = "";
      // this.startTimer();
    },

    startTimer() {
      if (this.timer) {
        clearInterval(this.timer);
      }

      this.timer = setInterval(() => {
        this.timeLeft--;
        this.minutes = Math.floor(this.timeLeft / 60)
          .toString()
          .padStart(2, "0");
        this.seconds = (this.timeLeft % 60).toString().padStart(2, "0");

        if (this.timeLeft <= 0) {
          this.$message.warning("答题时间已到!");
          this.handleClose();
        }
      }, 1000);
    },

    handleClose() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.answerRidao = false;
      this.dialogVisible = false;
      this.checkList = [];
      this.radioAnswer = "";
    },

    showAanswer() {
      const isMultiple = this.currentQuestion.type === "multiple";
      const answer = isMultiple ? this.checkList : this.radioAnswer;

      // if((isMultiple && answer.length === 0) || (!isMultiple && !answer)) {
      //   this.$message.warning('请选择答案')
      //   return
      // }

      // this.answeredQuestions.push(this.currentQuestionIndex)

      // 判断答案是否正确
      const correct = this.currentQuestion.correct;
      const isCorrect = isMultiple
        ? answer.length === correct.length &&
          answer.every((a) => correct.includes(a))
        : answer === correct;

      // if(isCorrect) {
      //   this.$message.success('回答正确!')
      // } else {
      //   this.$message.error('回答错误!')
      // }

      this.answerRidao = !this.answerRidao;
    },

    submitAnswer() {
      // const isMultiple = this.currentQuestion.type === 'multiple'
      // const answer = isMultiple ? this.checkList : this.radioAnswer

      // // if((isMultiple && answer.length === 0) || (!isMultiple && !answer)) {
      // //   this.$message.warning('请选择答案')
      // //   return
      // // }

      // this.answeredQuestions.push(this.currentQuestionIndex)

      // // 判断答案是否正确
      // const correct = this.currentQuestion.correct
      // const isCorrect = isMultiple
      //   ? answer.length === correct.length && answer.every(a => correct.includes(a))
      //   : answer === correct

      // if(isCorrect) {
      //   this.$message.success('回答正确!')
      // } else {
      //   this.$message.error('回答错误!')
      // }

      this.handleClose();
    },
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  background-image: url("/images/bg.png");
  background-size: cover;
  box-sizing: border-box;
  // display: flex;
  // justify-content: center;
  // align-items: center;

  .header {
    text-align: center;
    color: white;
    font-size: 30px;
  }
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 30px;
  padding: 150px;

  .el-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    height: auto;
    // background: red;
    margin-left: 0;

    .question-number {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .question-text {
      font-size: 18px;
    }
  }
}

.dialog-title {
  display: flex;
  align-items: center;
  justify-content: center;

  .question-type {
    font-size: 36px;
    margin-right: 15px;
  }

  .question-number {
    font-size: 40px;
    font-weight: bold;
    color: #409eff;
  }
}

.timer {
  text-align: center;
  font-size: 32px;
  color: #f56c6c;
  margin-bottom: 50px;

  i {
    margin-right: 10px;
  }
}

.question-content {
  margin-bottom: 5px;
  // height: 200px;
  h3 {
    margin: 0;
    font-size: 30px;
    line-height: 1.5;
    color: #303133;
  }
}

.answer {
  // height: 200px;
  font-size: 32px;
  margin: 30px 0;
  text-align: start;
  display: flex;

  .answer-label {
    font-weight: bold;
    color: #b5b8bc;
    // margin-bottom: 15px;
    text-align: center;
    margin: 30px 0;
    width: 260px;
  }

  .answer-content {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    // gap: 15px;
    // color: #b5b8bc;
  }
}

.el-button {
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.dialog-footer {
  text-align: center;

  .el-button {
    padding: 15px 30px;
    font-size: 20px;
  }
}

.btn {
  width: 97.6%;
  bottom: 20px;
  position: fixed;
  opacity: 0.3;
  z-index: 1;
}
</style>